<template>
  <div>
    <div style="margin-top: 3%;">
      <el-form :inline="true" ref="form" label-width="100px">
        <el-form-item label="表单名称">
          <el-select v-model="searchParams.resourceTypeTbale" placeholder="请选择资表单名称" @change="handleResourceTypeChange">
            <el-option label="资源集维护表" value="UserInfo"></el-option>
            <el-option label="新增与扩容" value="CreateAndEdit"></el-option>
            <el-option label="删除与回收" value="Delete"></el-option>
            <el-option label="工单表" value="WordOrder"></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="名称">
          <el-input placeholder="请输入名称" v-model="searchParams.name"></el-input>
        </el-form-item> -->
        <el-form-item label="项目名称">
          <el-input placeholder="请输入项目名称" v-model="searchParams.resource_name"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="resetAndFetchData">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleCreate">新建</el-button>
        </el-form-item>
        <el-button @click="exportAllToExcel">导出数据</el-button>
      </el-form>
    </div>

    <!--                     -->
    <!-- <el-dialog :title="dialogTitle" :visible.sync="dialogVisible"> -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" @before-close="closeDialog">
      <el-form :label-position="left" label-width="auto" :model="formData" :rules="formRules" ref="form">
        <!-- 根据不同的 resourceTypeTbale 动态渲染表单字段 -->
        <template v-if="searchParams.resourceTypeTbale === 'CreateAndEdit'">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="系统名称" prop="system_name">
                <el-input v-model="formData.system_name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="名称" prop="resource_name">
                <el-input v-model="formData.resource_name"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="类型" prop="type">
                <el-input v-model="formData.type"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="架构类型" prop="layer_type">
                <el-input v-model="formData.layer_type"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="资源类型" prop="resource_type">
                <el-input v-model="formData.resource_type"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="变更vcpu" prop="modified_vcpu">
                <el-input v-model="formData.modified_vcpu"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="变更内存GB" prop="modified_memory_gb">
                <el-input v-model="formData.modified_memory_gb"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="变更存储GB" prop="modified_storage_gb">
                <el-input v-model="formData.modified_storage_gb"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="内网/外网：" prop="network_type">
                <el-select v-model="formData.network_type" placeholder="内网/外网">
                  <el-option label="内网" value="内网"></el-option>
                  <el-option label="外网" value="外网"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="日期" required>
                <el-col :span="40">
                  <el-form-item prop="date">
                    <el-date-picker type="date" placeholder="选择日期" v-model="formData.date"
                      style="width: 100%;"></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 其他字段... -->
        </template>
        <template v-if="searchParams.resourceTypeTbale === 'UserInfo'">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="资源集名称：" prop="resource_name">
                <el-input v-model="formData.resource_name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="VDC级别：" prop="vdc_level">
                <el-input v-model="formData.vdc_level"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="所用组件：" prop="used_component">
                <el-input v-model="formData.used_component"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="系统编号：" prop="system_id">
                <el-input v-model="formData.system_id"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="统一云管上报：" prop="unified_cloud_report">
                <el-input v-model="formData.unified_cloud_report"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="项目管理账号：" prop="project_management_account">
                <el-input v-model="formData.project_management_account"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="是否领取账号：" prop="account_received">
                <el-input v-model="formData.account_received"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="账号使用人：" prop="account_user">
                <el-input v-model="formData.account_user"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="账号使用人电话：" prop="account_user_phone">
                <el-input v-model="formData.account_user_phone"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="角色：" prop="role">
                <el-input v-model="formData.role"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="用途：" prop="purpose">
                <el-input v-model="formData.purpose"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="专责姓名：" prop="specialist">
                <el-input v-model="formData.specialist"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="专责邮箱：" prop="specialist_email">
                <el-input v-model="formData.specialist_email"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="专责电话：" prop="specialist_phone">
                <el-input v-model="formData.specialist_phone"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="项目经理：" prop="project_manager">
                <el-input v-model="formData.project_manager"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="项目经理电话：" prop="project_manager_phone">
                <el-input v-model="formData.project_manager_phone"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="项目经理邮箱：" prop="project_manager_email">
                <el-input v-model="formData.project_manager_email"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="运维人员：" prop="maintenance_personnel">
                <el-input v-model="formData.maintenance_personnel"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="运维人员电话：" prop="maintenance_phone">
                <el-input v-model="formData.maintenance_phone"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="项目组邮箱：" prop="project_team_email">
                <el-input v-model="formData.project_team_email"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="自建/统推：" prop="self_built_or_push">
                <el-select v-model="formData.self_built_or_push" placeholder="自建/统推">
                  <el-option label="自建" value="自建"></el-option>
                  <el-option label="统推" value="统推"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="运行/部署：" prop="running_or_deployment">
                <el-select v-model="formData.running_or_deployment" placeholder="运行/部署">
                  <el-option label="运行" value="运行"></el-option>
                  <el-option label="部署" value="部署"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="申请资源时间：" required>
                <el-col :span="40">
                  <el-form-item prop="resource_application_time">
                    <el-date-picker type="date" placeholder="选择日期" v-model="formData.resource_application_time"
                      style="width: 100%;"></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="部署时间：" required>
                <el-col :span="40">
                  <el-form-item prop="deployment_time">
                    <el-date-picker type="date" placeholder="选择日期" v-model="formData.deployment_time"
                      style="width: 100%;"></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="20">
              <el-form-item label="上线时间：" required>
                <el-col :span="40">
                  <el-form-item prop="online_time">
                    <el-date-picker type="date" placeholder="选择日期" v-model="formData.online_time"
                      style="width: 100%;"></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-form-item>
            </el-col>
          </el-row>


          <!-- 其他字段... -->
        </template>
        <!-- 其他资源类型... -->
        <template v-if="searchParams.resourceTypeTbale === 'WordOrder'">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="工单编号" prop="order_id">
                <el-input v-model="formData.order_id"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="申请人" prop="cust_name">
                <el-input v-model="formData.cust_name"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="申请人电话" prop="cust_phone">
                <el-input v-model="formData.cust_phone"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="项目名称" prop="resourcessets_othername">
                <el-input v-model="formData.resourcessets_othername"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="所属部门" prop="department">
                <el-input v-model="formData.department"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="系统编号" prop="system_id">
                <el-input v-model="formData.system_id"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="专责" prop="ye_name">
                <el-input v-model="formData.ye_name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="专责电话" prop="专责电话">
                <el-input v-model="formData.ye_phone"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="资源类型（中文）" prop="resource_type">
                <el-input v-model="formData.resource_type"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="内网/外网：" prop="neiwai">
                <el-select v-model="formData.neiwai" placeholder="内网/外网">
                  <el-option label="内网" value="内网"></el-option>
                  <el-option label="外网" value="外网"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="资源类型（简称）" prop="resource_name">
                <el-input v-model="formData.resource_name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="数量" prop="many">
                <el-input v-model="formData.many"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="cpus" prop="cpus">
                <el-input v-model="formData.cpus"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="内存" prop="memory">
                <el-input v-model="formData.memory"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="存储" prop="disk">
                <el-input v-model="formData.disk"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="version" prop="version">
                <el-input v-model="formData.version"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="model" prop="model">
                <el-input v-model="formData.model"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="操作人" prop="yy_name">
                <el-input v-model="formData.yy_name"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="20">
              <el-form-item label="操作时间" required>
                <el-col :span="40">
                  <el-form-item prop="yy_date">
                    <el-date-picker type="date" placeholder="选择日期" v-model="formData.yy_date"
                      style="width: 100%;"></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 其他字段... -->
        </template>
        <!-- 其他资源类型... -->
        <template v-if="searchParams.resourceTypeTbale === 'Delete'">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="涉及资源集" prop="system_name">
                <el-input v-model="formData.system_name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="组件" prop="component">
                <el-input v-model="formData.component"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="资源名称" prop="resource_name">
                <el-input v-model="formData.resource_name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="IP地址" prop="ip">
                <el-input v-model="formData.ip"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="原vcpu" prop="original_vcpu">
                <el-input v-model="formData.original_vcpu"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="原内存" prop="original_memory">
                <el-input v-model="formData.original_memory"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="原存储" prop="original_storage">
                <el-input v-model="formData.original_storage"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="改后cpu" prop="modified_cpu">
                <el-input v-model="formData.modified_cpu"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="改后内存" prop="modified_memory">
                <el-input v-model="formData.modified_memory"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="改后存储" prop="modified_storage">
                <el-input v-model="formData.modified_storage"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="变化值cpu" prop="change_value_cpu">
                <el-input v-model="formData.change_value_cpu"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="变化值内存" prop="change_value_memory">
                <el-input v-model="formData.change_value_memory"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="变化值存储" prop="change_value_storage">
                <el-input v-model="formData.change_value_storage"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="类型" prop="type">
                <el-input v-model="formData.type"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="内网/外网：" prop="network_type">
                <el-select v-model="formData.network_type" placeholder="内网/外网">
                  <el-option label="内网" value="内网"></el-option>
                  <el-option label="外网" value="外网"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="备注" prop="remark">
                <el-input v-model="formData.remark"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="回收日期" required>
                <el-col :span="40">
                  <el-form-item prop="date">
                    <el-date-picker type="date" placeholder="选择日期" v-model="formData.date"
                      style="width: 100%;"></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 其他字段... -->
        </template>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm">提交</el-button>
      </span>
    </el-dialog>
    <!--              -->

    <div style="margin: 2%;width: 96%; overflow-x: auto;">

      <el-table :data="listData" border :style="tableStyle">
        <el-table-column v-for="column in displayedColumns" :key="column.prop" :prop="column.prop" :label="column.label"
          v-if="column.visible && column.prop !== 'operation'" :show-overflow-tooltip="true"
          :min-width="column.minWidth || '150px'" :max-width="column.maxWidth">
        </el-table-column>
        <!-- 操作列特殊处理，始终保持显示 -->
        <el-table-column label="操作" :min-width="'150px'" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" @click="edit(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="DeleteInfo(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

    </div>

    <div class="bottom-pagination">
      <el-pagination style="margin: 30px 0px;" @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="perPage"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>

import axios from 'axios';
import * as XLSX from 'xlsx';
import { saveAs } from 'file-saver';

export default {
  data() {
    return {
      listData: [], // 存储列表数据
      searchParams: {
        //  name: '', // 名称搜索参数
        resource_name: '', // 资源集名称搜索参数
        resourceTypeTbale: 'UserInfo', // 设置默认值
      },
      currentPage: 1, // 当前页码
      perPage: 10, // 每页数量
      total: 0, // 总条数
      displayedColumns: [], // 动态设置表格列
      //新建表单相关参数
      dialogVisible: false,
      //编辑对话框
      dialogTitle: '新增资源', // 根据场景动态改变
      isCreating: true, // 新增时为true，编辑时为false

      resourceTypeTbale: '',
      dialogTitle: '',
      formData: {},
      formRules: {
        // 定义表单验证规则
        resource_name: [
          { required: true, message: '资源集不能为空', trigger: 'change' }
        ],
      },
      tableStyle: {
        width: '100%',
        tableLayout: 'auto',
      },
    };
  },

  methods: {
    fetchData() {
      axios.get('/api/ybz/ybzChange', {
        params: {
          //   name: this.searchParams.name,
          resource_name: this.searchParams.resource_name,
          resourceTypeTbale: this.searchParams.resourceTypeTbale,
          page: this.currentPage,
          per_page: this.perPage,
        }
      }).then(response => {
        this.listData = response.data.data;
        this.total = response.data.meta.total || 0; // 确保total有默认值
      }).catch(error => {
        console.error("Error fetching data:", error);
      });
    },
    //编辑
    edit(row) {
      this.dialogTitle = '编辑资源'; // 更改对话框标题
      this.isCreating = false; // 设置为编辑模式
      this.formData = { ...row }; // 填充表单数据，深拷贝避免引用问题
      this.dialogVisible = true; // 显示对话框
    },

    DeleteInfo(row) {
      console.log('Row Data:', row);
      this.showConfirmDeleteDialog(row);
    },

    // 新增方法：显示确认删除对话框
    showConfirmDeleteDialog(row) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 用户点击确定，执行删除操作
        this.deleteData(row);
      }).catch(() => {
        // 用户点击取消，不执行任何操作
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    // 删除数据的方法
    async deleteData(row) {
      try {
        // 调用后端删除API
        axios.delete(`/api/ybz/ybzDelete`, {
          params: {
            resourceTypeTbale: this.searchParams.resourceTypeTbale,
            id: row.id
          }
        }); // 假设row.id是需要删除的数据的ID
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        // 刷新表格数据，具体实现取决于你的数据获取和更新逻辑
        this.fetchData(); // 假设这是你用来刷新列表数据的方法
      } catch (error) {
        console.error('删除失败:', error);
        this.$message.error('删除失败，请重试！');
      }
    },


    //表单严重规则

    //新建表单相关设置
    handleCreate() {
      this.resourceTypeTbale = this.searchParams.resourceTypeTbale; // 根据你的逻辑设置不同的类型
      this.dialogTitle = '新建' + this.resourceTypeTbale;
      this.formData = {}; // 重置表单数据
      this.dialogVisible = true;
    },
    // submitForm() {
    //   this.$refs.form.validate((valid) => {
    //     if (valid) {
    //       // 发送 POST 请求到后端 API
    //         axios.post('/api/ybz/ybzCurd', {
    //         resourceTypeTbale: this.resourceTypeTbale,
    //         ...this.formData
    //       }).then(response => {
    //         this.dialogVisible = false;
    //         // 处理成功响应
    //         this.$message({
    //         message: '资源创建成功',
    //         type: 'success'
    //         });
    //       }).catch(error => {
    //         // 处理错误响应
    //         this.$message({
    //         message: '创建资源失败: ' + error.response.data.message,
    //         type: 'error'
    //         });
    //       });
    //       }
    //   });
    // },

    //编辑功能
    submitForm() {
      this.$refs['form'].validate((valid) => { // 验证表单
        if (valid) {
          if (this.isCreating) {
            // 发送 POST 请求到后端 API
            axios.post('/api/ybz/ybzCurd', {
              resourceTypeTbale: this.resourceTypeTbale,
              ...this.formData
            }).then(response => {
              this.dialogVisible = false;
              // 处理成功响应
              this.$message({
                message: '资源创建成功',
                type: 'success'
              });
            }).catch(error => {
              // 处理错误响应
              this.$message({
                message: '创建资源失败: ' + error.response.data.message,
                type: 'error'
              });
            });
          } else {
            axios.put(`/api/ybz/ybzEdit`, {
              resourceTypeTbale: this.searchParams.resourceTypeTbale,
              ...this.formData
            }, this.formData)
              .then(response => {
                this.$message.success('编辑成功');
                this.dialogVisible = false; // 关闭对话框
                this.fetchData(); // 刷新数据列表
              })
              .catch(error => {
                this.$message.error('编辑失败');
                console.error('编辑请求出错:', error);
              });
          }
        } else {
          return false;
        }
      });
    },

    //关闭编辑对话框
    closeDialog() {
      this.dialogVisible = false;
      this.formData = {}; // 重置表单数据
      this.isCreating = true; // 重置为新增模式
      // 其他可能需要的清理操作
    },

    //----------------分页相关
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchData();
    },
    handleSizeChange(size) {
      this.perPage = size;
      this.currentPage = 1;
      this.fetchData();
    },
    resetSearch() {
      const currentResourceType = this.searchParams.resourceTypeTbale; // 保存当前的 resourceTypeTbale
      // this.searchParams = { name: '', resource_name: '', resourceTypeTbale: currentResourceType};
      this.searchParams = { resource_name: '', resourceTypeTbale: currentResourceType };
      this.currentPage = 1;
      this.fetchData();
    },
    resetAndFetchData() {
      // 重置分页参数并重新查询
      this.currentPage = 1;
      this.fetchData();
    },

    clearAllFormData() {
      // 假设formData包含所有表单项数据
      const defaultValues = {}; // 定义一个对象来存储各字段的默认值，如果需要特定的默认值可在此定义
      for (const key in this.formData) {
        if (this.formData.hasOwnProperty(key)) {
          // 根据字段类型设置合理的默认值
          // 这里简单地设置为空字符串，根据实际情况调整
          this.formData[key] = typeof this.formData[key] === 'string' ? '' : null;
          // 或者使用预定义的默认值
          // this.formData[key] = defaultValues[key] || '';
        }
      }
    },
    handleResourceTypeChange() {
      this.searchParams.resource_name = '';
      this.currentPage = 1;
      this.updateColumns();
      this.fetchData(); // 请求后端数据
      this.clearAllFormData();
    },
    updateColumns() {
      const resourceType = this.searchParams.resourceTypeTbale;
      if (resourceType === 'UserInfo') {
        this.availableColumns = [
          { prop: 'resource_name', label: '资源集' },
          { prop: 'vdc_level', label: 'vdc等级' },
          { prop: 'used_component', label: '所用组件' },
          { prop: 'system_id', label: '系统编号' },
          { prop: 'unified_cloud_report', label: '统一云管上报' },
          { prop: 'resource_application_time', label: '申请资源时间' },
          { prop: 'deployment_time', label: '申请资源时间' },
          { prop: 'online_time', label: '上线时间' },
          { prop: 'project_management_account', label: '项目管理账号' },
          { prop: 'account_received', label: '是否领取账号' },
          { prop: 'account_user', label: '账号使用人' },
          { prop: 'account_user_phone', label: '账号使用人电话' },
          { prop: 'role', label: '角色' },
          { prop: 'purpose', label: '用途' },
          { prop: 'self_built_or_push', label: '自建/统推' },
          { prop: 'running_or_deployment', label: '运行/部署' },
          { prop: 'description', label: '说明' },
          { prop: 'specialist', label: '专责' },
          { prop: 'specialist_email', label: '专责邮箱' },
          { prop: 'specialist_phone', label: '专责电话' },
          { prop: 'project_manager', label: '项目经理' },
          { prop: 'project_manager_phone', label: '项目经理电话' },
          { prop: 'project_manager_email', label: '项目经理邮箱' },
          { prop: 'maintenance_personnel', label: '运维人员' },
          { prop: 'maintenance_phone', label: '电话' },
          { prop: 'project_team_email', label: '项目组邮箱' },
        ];
      } else if (resourceType === 'CreateAndEdit') {
        this.availableColumns = [
          { prop: 'system_name', label: '系统名称' },
          { prop: 'resource_name', label: '名称' },
          { prop: 'type', label: '类型' },
          { prop: 'layer_type', label: '架构类型' },
          { prop: 'network_type', label: '内网/外网' },
          { prop: 'resource_type', label: '资源类型' },
          { prop: 'modified_vcpu', label: '变更vcpu' },
          { prop: 'modified_memory_gb', label: '变更内存GB' },
          { prop: 'modified_storage_gb', label: '变更存储GB' },
          { prop: 'date', label: '日期' },
        ];
      } else if (resourceType === 'Delete') {
        this.availableColumns = [
          { prop: 'system_name', label: '涉及资源集' },
          { prop: 'component', label: '组件' },
          { prop: 'resource_name', label: '资源名称' },
          { prop: 'network_type', label: '内网/外网' },
          { prop: 'ip', label: 'IP地址' },
          { prop: 'original_vcpu', label: '原vcpu' },
          { prop: 'original_memory', label: '原内存' },
          { prop: 'original_storage', label: '原存储' },
          { prop: 'modified_cpu', label: '改后cpu' },
          { prop: 'modified_memory', label: '改后内存' },
          { prop: 'modified_storage', label: '改后存储' },
          { prop: 'change_value_cpu', label: '变化值cpu' },
          { prop: 'change_value_memory', label: '变化值内存' },
          { prop: 'change_value_storage', label: '变化值存储' },
          { prop: 'type', label: '类型' },
          { prop: 'date', label: '日期' },
          { prop: 'remark', label: '备注' },
        ];
      } else if (resourceType === 'WordOrder') {
        this.availableColumns = [
          { prop: 'order_id', label: '工单编号' },
          { prop: 'cust_name', label: '申请人' },
          { prop: 'cust_phone', label: '申请人电话' },
          { prop: 'resourcessets_othername', label: '项目名称' },
          { prop: 'department', label: '所属部门' },
          { prop: 'system_id', label: '系统编号' },
          { prop: 'ye_name', label: '专责' },
          { prop: 'ye_phone', label: '专责电话' },
          { prop: 'resource_type', label: '资源类型' },
          { prop: 'resource_name', label: '资源类型（简称）' },
          { prop: 'neiwai', label: '内网/外网' },
          { prop: 'many', label: '数量' },
          { prop: 'cpus', label: 'cpus' },
          { prop: 'memory', label: '内存' },
          { prop: 'disk', label: '存储' },
          { prop: 'version', label: 'version' },
          { prop: 'model', label: 'model' },
          { prop: 'yy_name', label: '操作人' },
          { prop: 'yy_date', label: '操作日期' },
        ];
      }
      this.displayedColumns = this.availableColumns.map(column => ({ ...column, visible: true }));
    },

    init() {
      this.updateColumns();
      this.fetchData();
    },
    exportAllToExcel() {
      axios.get('/api/ybz/ybzChange', {
        params: {
          //name: this.searchParams.name,
          resource_name: this.searchParams.resource_name,
          resourceTypeTbale: this.searchParams.resourceTypeTbale,
          // 请求所有数据
          page: 1,
          per_page: this.total,
        }
      }).then(response => {
        const allData = response.data.data;

        // 构建表头
        const headers = this.displayedColumns.filter(column => column.visible).map(column => column.label);
        const props = this.displayedColumns.filter(column => column.visible).map(column => column.prop);

        // 构建数据
        const data = allData.map(row => props.map(prop => row[prop]));

        // 添加表头到数据
        data.unshift(headers);

        // 创建工作簿
        const worksheet = XLSX.utils.aoa_to_sheet(data);
        const workbook = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

        // 导出 Excel 文件
        const wbout = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
        saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '导出数据.xlsx');
      }).catch(error => {
        console.error("Error fetching all data:", error);
      });
    }
  },
  mounted() {
    this.init();
  }
};


</script>

<style>
.bottom-pagination {
  width: 100%;
  display: flex;
  justify-content: center;
}

/* from 表单样式 */
.el-dialog {
  width: 800px;
  /* 自定义宽度 */
  max-width: 90%;
  /* 保持最大宽度限制，可选 */
  margin-top: 10vh !important;
  /* 调整垂直位置，使对话框居中显示，！important用于覆盖可能的默认样式 */
}

/* 如果需要调整对话框内容区域的大小，可以添加如下样式 */
.el-dialog__body {
  padding: 20px 50px;
  /* 可根据需要调整内边距 */
}

.el-dialog__footer {
  text-align: center;
  /* 按钮居中对齐 */
  /* display: flex; */
  justify-content: center;
  /* 适用于弹性布局，确保按钮在水平方向上居中 */
  align-items: center;
  /* 垂直居中，如果只需要水平居中，这行可以省略 */
  height: 90px;
  /* 自定义底部高度，根据需要调整 */
  /* padding-bottom: 30; 移除默认的内边距，如果有需要的话 */
}

/* 表格表头样式 */
.el-table th .cell {
  white-space: nowrap;
  overflow: visible;
}

.operation-buttons {
  display: flex;
  gap: 8px;
  white-space: nowrap;
}
</style>
